<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=11">
		<title>测试代码</title>
		<!-- 我这里使用了 Bootstrap 和 Font Awesome，你可以自己本地存一份，一样能用。-->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" crossorigin="anonymous">
		<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
		<style type="text/css">
			body {
				background: url(https://i.natfrp.com/23da8266585931aebf6331980fa1d926.jpg);
				background-color: #FFF;
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				background-attachment: fixed;
			}
			.left-down-box {
				width: 430px;
				height: 320px;
				position: fixed;
				left: 0px;
				bottom: -230px;
			}
			.price-now {
				width: 100%;
				height: 320px;
				background: #8e764a;
				position: absolute;
				left: -30px;
				transform: rotate(5deg);
				animation: popup 1s infinite;
				box-shadow: 0px 0px 8px rgba(0,0,0,0.7);
				cursor: pointer;
			}
			.price-now-text {
				width: 100%;
				color: #FFF;
				position: absolute;
				top: 40px;
				font-size: 20px;
				text-align: center;
				cursor: pointer;
				font-weight: bold;
			}
			.price-now-text .fa-money {
				margin-right: 20px;
			}
			.price-now-text .upbtn {
				margin-left: 80px;
			}
			.top-hide-text {
				margin-top: 71px;
				font-weight: 400;
				font-size: 17px;
				color: #a0a0a0;
				position: absolute;
				top: 25px;
				padding-left: 20px;
				padding-right: 32px;
				border-top: 1px solid #ddd;
				margin-right: 40px;
				padding-top: 20px;
			}
			.price-card {
				width: 430px;
				right: 0;
				padding: 40px 0 18px 30px;
				background: #231f20;
				color: #fff;
				position: absolute;
				top: 183px;
				font: inherit;
				font-family: 'Open Sans', sans-serif;
				-webkit-font-smoothing: antialiased;
				vertical-align: baseline;
			}
			.price-card .title {
				font-size: 20px;
				font-weight: 540;
				margin: 0;
				line-height: 20px;
				text-transform: uppercase;
			}
			.price-card .pos {
				float: right;
				margin-right: 26px;
			}
			.price-card .pos .dollar, .price-card .pos .new_price {
				color: #8e764a;
				box-sizing: inherit;
			}
			.price-card .pos .new_price {
				font-size: 70px;
				font-weight: 300;
				line-height: 60px;
			}
			.price-card .pos .dollar {
				position: relative;
				top: -5px;
				font-style: normal;
				font-size: 50px;
				font-weight: 300;
			}
			.price-card .pos .old_price {
				display: block;
				font-size: 18px;
				font-weight: 400;
				color: #fff;
				line-height: 18px;
				text-transform: lowercase;
				text-decoration: line-through;
				opacity: 0.7;
				text-align: right;
				margin-top: 16px;
			}
			.price-card .list {
				margin: 15px 0 0 0;
				/*list-style: none;*/
				display: block;
				position: relative;
				left: -20px;
			}
			.price-card .list li {
				font-size: 16px;
				font-weight: 400;
				color: #fff;
				line-height: 16px;
				margin: 0 0 10px 0;
				opacity: 0.7;
			}
			.price-card .rate {
				font-size: 12px;
				font-weight: 500;
				color: #fff;
				line-height: 12px;
				margin: 30px 0 0 0;
				text-transform: uppercase;
			}
			.price-card .rate em {
				font-style: normal;
				opacity: 0.7;
			}
			.price-card .rate span {
				opacity: 0.4;
			}
			.price-card .terms {
				font-size: 12px;
				font-weight: 400;
				color: #fff;
				line-height: 12px;
				margin: 10px 0 0 0;
				opacity: 0.4;
			}
			.price-card .verified {
				font-family: 'Open Sans', sans-serif !important;
				font-size: 12px !important;
				font-weight: 300 !important;
				color: #fff !important;
				line-height: 48px !important;
				display: block !important;
				text-decoration: none;
			}
			.price-card .verified em {
				font-style: normal;
				margin: 0;
				padding: 0;
				opacity: 0.7;
				margin-left: 4px;
				margin-top: 8px;
			}
			.left-down-box .shadowbox {
				position: absolute;
				top: 457px;
				box-shadow: 0px 0px 8px rgba(0,0,0,0.7);
			}
			.left-down-box .ota {
				background: #e5e3d9;
				color: #231f20;
				padding: 20px 30px;
				padding-bottom: 10px;
				width: 400px;
			}
			.left-down-box .ota .firstline {
				font-size: 14px;
				font-weight: 400;
				line-height: 14px;
				margin: 0 0 20px 0;
				opacity: 0.7;
			}
			.left-down-box .ota .secondline {
				font-weight: bold;
				font-size: 16px;
			}
			.left-down-box .ota .secondline span {
				float: right;
			}
			.left-down-box .email {
				background: #FFF;
				width: 400px;
			}
			.left-down-box .email p {
				font-size: 16px;
				font-weight: 400;
				padding: 20px 30px;
				line-height: 22px;
			}
			.left-down-box .email .subscribe_email {
				background: #fff;
				width: 85%;
				height: auto;
				font-size: 18px !important;
				font-weight: 400;
				color: #999;
				margin: -12 0 0 30px;
				padding: 20px;
				line-height: 18px;
				border: 1px solid #ccc;
				text-transform: none;
				text-align: left;
				outline: none;
			}
			.left-down-box .email .terms_acceptance_label {
				display: block;
				margin: 15px 30px 0;
				width: 85%;
				line-height: 12pt;
				font-size: 12px;
				color: #777;
				cursor: pointer;
				font-weight: 300;
			}
			.left-down-box .email .terms_acceptance {
				margin-right: 8px;
			}
			.left-down-box .email .subscribe_btn {
				background: #8e764a;
				width: 100%;
				height: auto;
				font-size: 20px;
				font-weight: 600;
				color: #fff;
				margin: 15px 0 0 0;
				padding: 20px 30px;
				line-height: 20px;
				text-transform: uppercase;
				text-align: left;
				cursor: pointer;
				-webkit-animation: btn_highlight 1s ease infinite;
				animation: btn_highlight 1s ease infinite;
				transform: translateZ(0);
				border-color: #ceb47c;
			}
			.left-down-box .email .subscribe_btn:hover {
				background-color: #ceb47c;
				color: #fff;
				border-color: #ceb47c;
				animation: btn_highlight_2 1s ease;
			}
			.left-down-box .email .subscribe_icon {
				float: right;
			}
			@keyframes popup {
				0% {
					background: #8e764a;
					margin-top: 0px;
				}
				50% {
					background: #80673b;
					margin-top: 5px;
				}
				100% {
					background: #8e764a;
					margin-top: 0px;
				}
			}
			@-webkit-keyframes btn_highlight {
				0% {
					background: #8e764a;
				}
				50% {
					background: #80673b;
				}
				100% {
					background: #8e764a;
				}
			}
			@keyframes btn_highlight {
				0% {
					background: #8e764a;
				}
				50% {
					background: #80673b;
				}
				100% {
					background: #8e764a;
				}
			}
			@-webkit-keyframes btn_highlight_2 {
				0% {
					background: #8e764a;
				}
				100% {
					background: #ceb47c;
				}
			}
			@keyframes btn_highlight_2 {
				0% {
					background: #8e764a;
				}
				100% {
					background: #ceb47c;
				}
			}
		</style>
	</head>
	<body>
		<div class="left-down-box">
			<div class="price-now" onclick="showbox()"></div>
			<div class="price-now-text" onclick="showbox()">
				<div class="showtext">
					<i class="fa fa-money"></i>PRICE CHECK NOW<i id="upbtn" class="fa fa-angle-up upbtn"></i>
				</div>
			</div>
			<p class="top-hide-text">Always get the best price and experience guaranteed, booking direct with us.</p>
			<div class="price-card">
				<span class="title">Subscribers Price</span>
				<div class="pos">
					<span class="dollar">$</span>
					<span class="new_price">165</span>
					<span class="old_price">was $172</span>
				</div>
				<ul class="list">
					<li>Free Wi-Fi</li>
					<li>$12 Parking</li>
					<li>Best Rate</li>
				</ul>
				<div class="rate"><em>Date</em> <span class="startdate">24/09/2019</span> - <span class="enddate">25/09/2019</span> (1 Night Price)</div>
				<div class="terms">Subject to availability, terms and conditions.</div>
				<a href="http://pebbledesign.com/pricecheck" target="_blank" class="verified">
					<img src="" width="20" height="20" alt="Verified by Pebble Price Check">
					<em>Verified by Pebble Price Check</em>
				</a>
			</div>
			<div class="shadowbox">
				<div class="ota">
					<p class="firstline">No need to search anywhere else for the best rate.</p>
					<p class="secondline">Cheapest Comparison Rate <span>$179</span></p>
				</div>
				<div class="email">
					<p>Subscribe and stay updated, unlock your personalised subscribers promo code and receive exclusive offers.</p>
					<form onsubmit="return false;">
						<input class="subscribe_email" type="email" placeholder="Your Email Address">
						<label class="terms_acceptance_label">
							<input type="checkbox" class="terms_acceptance">I agree to your
							<a href="http://alexperryhotelandapartments.com.au/privacy" class="terms_acceptance_link" target="_blank">privacy policy</a>, and my personal data being stored to receive promotional offers.
						</label>
						<button class="subscribe_btn" type="submit">Unlock promo code
							<em>now!</em>
							<i class="fa fa-thumbs-up subscribe_icon"></i>
						</button>	
					</form>
				</div>
			</div>
		</div>
	</body>
	<!-- 这里的两个 Js 也是，jQuery 和 Bootstrap 随便找一个都能用。-->
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
	<script type="text/javascript">
		var opened = false;
		function showbox() {
			if(opened) {
				$(".left-down-box").animate({"bottom":"-230px"});
				$(".price-now").css({"animation":"popup 1s infinite","background":"#8e764a"});
				$(".price-now-text").css({"color":"#FFFFFF"});
				$("#upbtn").attr("class", "fa fa-angle-up upbtn");
				opened = false;
			} else {
				$(".left-down-box").animate({"bottom":"530px"});
				$(".price-now").css({"animation":"none","background":"#FFFFFF"});
				$(".price-now-text").css({"color":"#000000"});
				$("#upbtn").attr("class", "fa fa-angle-down upbtn");
				opened = true;
			}
		}
	</script>
</html>
